<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品详情</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="amazeui/css/amazeui.min.css"/>
<link rel="stylesheet" href="default/style.css"/>
<script src="amazeui/js/jquery.min.js"></script>
<script src="amazeui/js/amazeui.min.js"></script>
<script>
function checkIsInteger(str)
{
  //如果为空，则通过校验
  if(str == "")
    return true;
     if(/^(\-?)(\d+)$/.test(str))
       return true;
     else
       return false;
}
var errordialog=function(c){
	alert(c)
}
//检验商品数量
function checkCounts(id) {
    var Counts = $("#" + id).val();
    if (Counts == "") {
        errordialog("请填写数量!");
        return false;
    }
    else if (!checkIsInteger(Counts)) {
        errordialog("商品数量不是整数!");
        return false;
    }
    else if (Counts < 1) {
        errordialog("商品数量不能小于1!");
        return false;
    }
    else {
        return true;
    }
}
function addQty(){
	checkCounts('txtQty');
	var qty = parseInt($('#txtQty').val());
	$('#txtQty').val(qty+1);
}
function subtractQty(){
	checkCounts('txtQty');
	var qty = parseInt($('#txtQty').val());
	if(qty <=1){
		errordialog("商品数量不能小于1");
		return;
	}
	$('#txtQty').val(qty-1);
}
</script>
    <style>
        .size-p span{
            display: inline-block;
            margin-bottom: 2px;
        }
    </style>
</head>

<body>
<div class="container">
	<header data-am-widget="header" class="am-header am-header-default my-header">
      <!--<div class="am-header-left am-header-nav">-->
        <!--<a href="#left-link" class="">-->
          <!--<i class="am-header-icon am-icon-chevron-left"></i>-->
        <!--</a>-->
      <!--</div>-->
      <h1 class="am-header-title">
        <a href="#title-link" class=""  >商品详情</a>
      </h1>
      <!--<div class="am-header-right am-header-nav">-->
        <!--<a href="#right-link" class="">-->
          <!--<i class="am-header-icon  am-icon-home"></i>-->
        <!--</a>-->
      <!--</div>-->
    </header>
    <!-- banner -->
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'>
      <ul class="am-slides">
        <li>
          <img th:src="${product.img}">
        </li>
      </ul>
    </div>
	<div class="gray-panel">
    	<div class="paoduct-title-panel">
        	<h1 class="product-h1" th:text="${product.name}">商品名称</h1>
            <p><span class="bold">价格：</span><span class="red2" th:text="${'￥'+product.price}">￥60.00</span></p>
        </div>
        <div class="my-search-title-panel">
            <div th:each="pinlei : ${product.pinlei} " id="attributeLists">
            <p class="my-search-titp-p am-text-sm bold" th:text="${pinlei.name}" th:d-id="${pinlei.id}"></p>
            <p class="size-p">
                <span class="attribute-span" data-size="S" th:each="attribute :${pinlei.attribute}" th:text="${attribute.name}" th:d-id="${attribute.id}"></span>
            </p>
            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm am-no-layout">
            </div>


            <p class="my-search-titp-p am-text-sm bold">数量</p>
            <div style="overflow:hidden">
                <form class="am-form-inline" role="form">
                    <button type="button" class="am-btn am-btn-default" style="float:left" onclick="subtractQty();"><i class="am-icon-minus"></i></button>
                    <input type="number" name="txtQty" id="txtQty" class="am-form-field txt-qty am-text-center am-text-sm" value="1" style=" width:60px; margin-right:0px; height:37px; display:inline; float:left">
                    <button type="button" class="am-btn am-btn-default" style="float:left" onclick="addQty();"><i class="am-icon-plus"></i></button>
                </form>
            </div>
            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm am-no-layout">
            <div>
                <ul class="am-avg-sm-2 am-text-center">
                    <!--<li class="am-text-center am-padding-sm"><button type="button" class="am-btn am-btn-success am-btn-block am-radius">加入购物车</button></li>-->
                    <li style="width: 100%" id="addCar" class="am-text-center am-padding-sm"><button type="button" class="am-btn am-btn-danger am-btn-block am-radius">加入购物车</button></li>
                </ul>
            </div>
        </div>
            <!-- 商品详情 -->
        
        <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
          <ul class="am-tabs-nav am-cf">
            <li class="am-active">
              <a href="[data-tab-panel-0]">详情</a>
            </li>

          </ul>
          <div class="am-tabs-bd">
            <div style="padding-bottom: 0px" data-tab-panel-0 class="am-tab-panel am-active" th:text="${product.description}">【温氏乳业大促销】
            </div>
              <span style="color: red" th:if="${product.id} == 3" >
               （此套餐只限广东、广西、湖南郴州、永州地区）
              </span>
              <div th:if="${product.id}==1">
                  <img style="width:100%" src="default/200mlmilk.png">
                  <img style="width:100%" src="default/250mlmilk.png">
              </div>
              <div th:if="${product.id}==2">
                  <img style="width:100%" src="default/200mlmilk.png">
                  <img style="width:100%" src="default/yinglun.jpg">
              </div>
              <div th:if="${product.id}==3">
                  <img style="width:100%" src="default/1.2kgsuannai.png">
                  <img style="width:100%" src="default/weiyishiguang.jpg">
              </div>
        </div>
        </div>



    <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
        <div class="am-footer-miscs ">
            <p>广东温氏乳业有限公司</p>

        </div>
    </footer>
    <!--底部-->
        <div data-am-widget="navbar" class="am-navbar am-cf my-nav-footer " id="">
            <ul class="am-navbar-nav am-cf am-avg-sm-4 my-footer-ul">
                <li>
                    <a href="/index.html" class="">
                        <span class="am-icon-home"></span>
                        <span class="am-navbar-label">首页</span>
                    </a>
                </li>
                <li>
                    <a href="/shoppingcart.html" class="">
                        <span class=" am-icon-cart-plus"></span>
                        <span class="am-navbar-label">购物车</span>
                    </a>
                </li>
                <li style="position:relative">
                    <a href="/reg.html" class="">
                        <span class="am-icon-user"></span>
                        <span class="am-navbar-label">收货地址</span>
                    </a>
                </li>
                <li style="position:relative">
                    <a href="/groupbuy.html" class="">
                        <span class="am-icon-list"></span>
                        <span class="am-navbar-label">订单列表</span>
                    </a>
                </li>
            </ul>
            <script>
                function showFooterNav(){
                    $("#footNav").toggle();
                }
            </script>
        </div>
</div>
</div>
</body>
<script src="public.js"></script>
<script>
    $(document).ready(function(e) {
        $(".attribute-span").click(function () {
            $(this).parent(".size-p").find("span").removeClass("click");
            $(this).addClass("click");
        });
    });
    $("#addCar").click(function () {
        var check=true;
        $(".size-p").each(function (index,element) {
            if($(this).find("span").length>0&&$(this).find(".click").length<=0){
               check=false;
            }
        });
        if(!check){
            alert("请先选择产品规格。");
            return;
        }
        var arr=[];
        $(".click").each(function () {
            var attributeId=$(this).attr("d-id");
            attributeId=parseInt(attributeId);
            arr.push(attributeId);
        });
        arr.sort(asc);
        var str = arr.join(",");
        var q=parseInt($("#txtQty").val());
        var qty=0;
        if(!isNaN(q)){
           qty=q;
        }
        var productId=getQueryString("id");
        $.ajax({
            type: 'POST',
            url: '/verify/addBuyCar',
            data: {qty:qty,attribute:str,productId:productId},
            dataType:"JSON",
            success: function (data) {
                console.log(data);
                if(data.code==0){
                    alert("操作成功!");
                    window.location.href="/shoppingcart.html";
                }else{
                    alert(data.msg);
                }
                return;
            },
            error:function () {
                alert("服务器出错，请稍后再试");
                return;
            }
        });
    });

</script>
</html>
